<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col section_1">
				<!-- <text class="title">{{lists.strategyTitle}}</text> -->
				<view class="flex-col content">

					<u-parse :content="lists.strategyText"></u-parse>
				</view>
			</view>
			<!-- 点赞数 -->
			<view class="justify-between section_3 fixed">

				<view class="flex-col items-center" @click="likeCount">
					<image :src="this.likeStatus==true ?$IMG_URL+'dzy.png':$IMG_URL+'16557826815580468287.png'"
						class=" image_7" />

					<text class="text_9">{{lists.strategyLike}}</text>
				</view>
				<!-- 收藏数 -->
				<view class="flex-col items-center" @click="collection">

					<image
						:src="this.collectionStatus==true ?$IMG_URL+'16557836921572999709.png':$IMG_URL+'16557826699351904721.png'"
						class=" image_7" />
					<text class="text_10">{{lists.strategyCollection}}</text>
				</view>
				<view class="flex-row" @click="go('/pages/login/reg')">
					<view class="flex-row section_4">
						<image :src="imgUrl+'16557826717822197335.png'" class="image_7 image_10" />
						<text class="text_11">好友</text>
					</view>
					<view class="flex-row section_5">
						<image :src="imgUrl+'16557826729458122633.png'" class="image_7 image_11" />
						<text class="text_12">朋友圈</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isActive: true,
				collections: false,
				strategyId: '',
				lists: [],
				strategyTitle: 0,
				type: 0,
				imgUrl: this.$IMG_URL,
				collectionStatus: '',
				likeStatus: '',
				likeCounts: '',
			};
		},
		onLoad(option) {
			console.log(option)
			this.strategyId = option.strategyId;
		},
		created() {
			this.queryStrategy();
		},
		methods: {

			back() {
				uni.navigateBack()({
					url: "/pages/index/works",
				})
			},

			queryStrategy() { //文章内容
				this.$http('decorationStrategy.queryStrategy', {
					strategyId: this.strategyId
				}).then(r => {
					if (r.code == 200) {
						this.lists = r.data;
						this.likeStatus = r.data.likeStatus;
						this.collectionStatus = r.data.collectionStatus;
						// console.log(this.lists);
						uni.setNavigationBarTitle({
							title: r.data.strategyTitle
						});
					} else {
						this.$u.toast(r.msg);
					}
				});
			},

			collection() { //收藏
				this.$http('decorationStrategy.collection', {
					strategyId: this.strategyId, //攻略ID
					collectionStatus: (this.collectionStatus && this.collectionStatus == true) ? false : true,
				}).then(r => {
					if (r.code == 200) {
						this.lists.strategyCollection = r.data.collectionCount;
						this.collectionStatus = r.data.collectionStatus;
					} else {
						console.log(r.data.msg);

					}
				});
				//收藏提示
				if (this.collectionStatus) {
					this.$http('decorationStrategy.collection', {
						strategyId: this.strategyId, //攻略ID
						collectionStatus: (this.collectionStatus && this.collectionStatus == true) ? false : true,
					}).then(r => {
						if (r.code == 200) {
							this.$u.toast(r.msg);
						} else {

							this.$u.toast(r.msg);
						}
					});
				} else {
					this.$http('decorationStrategy.collection', {
						strategyId: this.strategyId, //攻略ID
						collectionStatus: (this.collectionStatus && this.collectionStatus == true) ? false : true,
					}).then(r => {
						if (r.code == 200) {
							this.$u.toast(r.msg);
						} else {
							this.$u.toast(r.msg);
						}
					});
				}
			},

			likeCount() { //点赞
				this.$http('decorationStrategy.likeCount', {
					strategyId: this.strategyId, //攻略ID
					strategyStatus: (this.likeStatus && this.likeStatus == true) ? false : true
				}).then(r => {
					if (r.code == 200) {
						this.lists.strategyLike = r.data.likeCount;
						this.likeStatus = r.data.likeStatus;
					} else {
						console.log(r.data.msg);
					}
				});
				//点赞状态判断/
				if (this.likeStatus) {
					// this.type = !this.type
					this.$http('decorationStrategy.likeCount', {
						strategyId: this.strategyId, //攻略ID
						strategyStatus: (this.likeStatus && this.likeStatus == true) ? false : true,
					}).then(r => {
						if (r.code == 200) {
							this.$u.toast(r.msg);
							console.log(666, '触发收藏200');
						}
					});
				} else {
					this.$http('decorationStrategy.likeCount', {
						strategyId: this.strategyId, //攻略ID
						strategyStatus: (this.likeStatus && this.likeStatus == true) ? false : true
					}).then(r => {
						if (r.code == 200) {
							this.$u.toast(r.msg);
							console.log(666, '触发点赞else');
						}
					});
				}
			},

		},
	};
</script>

<style scoped lang="scss">
	.active {
		display: inherit;
		transform: rotate(180deg);
	}

	.fixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.title {
		display: flex;
		justify-content: center;
		width: 686rpx;

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 0px;
		color: #191919;
		letter-spacing: 6rpx;
		opacity: 1;
	}

	.image_1 {
		border-radius: 16rpx;
		width: 91.4667vw;
		height: 46.6667vw;
	}

	.image_7 {
		width: 40rpx;
		height: 40rpx;
	}

	.content {
		margin-top: 32rpx;
	}

	.page {
		background-color: #f6f7f9;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.title-1 {
		background-color: #ffffff;
		font-weight: 600;
		font-size: 32rpx;
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
	}

	.group {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.section_1 {
		padding: 29rpx 32rpx 53rpx;
		background-color: #ffffffff;
	}

	.section_2 {
		margin-top: 20rpx;
		padding: 28rpx 32rpx 40rpx;
		background-color: #ffffffff;
	}

	.section_3 {
		padding: 17rpx 32rpx 18rpx 72rpx;
		background-color: #ffffff;
		box-shadow: 0px -1rpx 0px 0px #0000001c;
	}

	.text_1 {
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
		text-align: center;
		font-weight: bold;
	}

	.group_1 {
		margin-top: 32rpx;
	}

	.group_5 {
		margin-top: 44rpx;
	}

	.image_6 {
		margin-top: 44rpx;
	}

	.text_2 {
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 45rpx;
	}

	.group_2 {
		margin-top: 41rpx;
	}

	.text_3 {
		margin-top: 32rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 60rpx;
		text-align: left;
		margin-bottom: 50px;
	}

	.image_4 {
		margin-top: 11rpx;
		width: 32rpx;
		height: 36rpx;
	}

	.group_4 {
		margin-left: 24rpx;
		margin-bottom: 4rpx;
		height: 43rpx;
	}

	.text_6 {
		align-self: flex-start;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_7 {
		margin-top: 32rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_5 {
		margin-top: 41rpx;
	}

	.text_8 {
		margin-top: 32rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
		text-align: left;
	}

	.text_9 {
		margin-top: 5rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_10 {
		margin-top: 5rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.section_4 {

		background-color: #f6f7f9;
		border-radius: 36rpx;
		height: 72rpx;
		width: 184rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.section_5 {
		margin-left: 24rpx;
		height: 72rpx;
		width: 184rpx;
		background-color: #f6f7f9;
		border-radius: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.image_3 {
		margin-top: 24rpx;
	}

	.text_4 {
		color: #fe641a;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.text_5 {
		color: #191919;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.image_10 {
		flex-shrink: 0;
	}

	.text_11 {
		margin-left: 11rpx;
		margin-right: 3rpx;
		color: #333333;
		font-size: 24rpx;


	}

	.image_11 {
		flex-shrink: 0;
	}

	.text_12 {
		margin-left: 9rpx;
		margin-right: 3rpx;
		color: #333333;
		font-size: 24rpx;


	}
</style>
